<template>
	<view class="top-search">
		<view class="top-search-box">

			<view class="top-search-box-left u-flex u-col-center u-row-between" @click="chose_address">
				<text class="top-search-box-left-text u-margin-right-15">{{vuex_address_dafauflt.region_name}}</text>
				<!-- <uni-icons class="top-search-box-icon" type="arrowdown" size="14"></uni-icons> -->
				<u-icon name="arrow-down" color="#000" size="26" class="top-search-box-icon"></u-icon>
			</view>

			<view class="top-search-box-center u-flex u-col-center u-row-between" @click="input_click">
				<input disabled class="top-search-box-center-input" type="text" placeholder="地点/地标/关键词" />
			</view>

			<view class="top-search-box-right u-flex u-col-center u-row-between" @click="input_click">
				<u-icon name="search" color="#fa3534" size="32" class="top-search-box-icon"></u-icon>
				<!-- <uni-icons class="top-search-box-right-icon" type="search" color="#fa3534" size="18"></uni-icons> -->
				<text class="top-search-box-right-text">搜民宿</text>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "home-search",
		data() {
			return {

			};
		},
		methods: {
			// 点击输入框
			input_click() {
				this.$emit('input_click')
			},
			chose_address() {
				this.$emit('chose_address')
			}
		},
		computed: {
			...mapState({
				vuex_address_dafauflt: state => state.vuex_address_dafauflt,
			})
		},
	}
</script>

<style lang="scss" scoped>
	.top-search-box-left-text {
		color: #000;
		font-weight: 700;
	}

	.top-search-box-center {
		flex: 1;
		margin: 0 20rpx;
	}

	.top-search-box-right-text {
		color: #fa3534;
	}

	.top-search-box-right {
		background-color: rgba(255,255,255,.9);
		box-shadow: 0rpx 0rpx 6rpx 0rpx #c8c9cc;
		height: 72rpx;
		width: 160rpx;
		border-radius: 36rpx;
		margin-right: 10rpx;
		padding: 0 15rpx;
	}

	.top-search-box-icon {
		margin-left: 7rpx;
	}

	.top-search-box-left {
		// background-color: #2B85E4;
		padding: 0 30rpx 0 40rpx;
		height: 40rpx;
		border-right: 1rpx solid $u-border-color;
	}

	.top-search-box {
		background-color: rgba(255,255,255,.91);
		height: 92rpx;
		margin: 0 50rpx;
		border-radius: 46rpx 46rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top-search {
		position: absolute;
		bottom: 150rpx;
		width: 750rpx;
	}
</style>
